<template>
  <div class="problem-container nav-bar-top">
    <van-nav-bar class="nav-bar" title="意见反馈" left-arrow @click-left="$router.back()"/>
    <van-form>
      <div class="circle-bg problem-bg">
        <div class="field-title no-top">请选择类型</div>
        <van-radio-group v-model="type">
          <van-radio name="1">产品功能问题反馈</van-radio>
          <van-radio name="2">建议及意见反馈</van-radio>
          <van-radio name="3">投诉客服其他问题</van-radio>
        </van-radio-group>
      </div>
      <div class="circle-bg problem-bg">
        <div class="field-title">相关描述</div>
        <van-field
          class="message"
          v-model="message"
          rows="3"
          autosize
          type="textarea"
          placeholder="客官~您对我们的服务还满意吗，请给予我们你的意见我 们将做的更好~"
        />
      </div>
      <div class="circle-bg problem-bg">
        <div class="field-title">图片说明</div>
        <van-uploader v-model="fileList" multiple />
      </div>
      <div class="submit">
        <van-button block native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'problem',
  data () {
    return {
      type: '1',
      message: '',
      fileList: [
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: 'https://cloud-image', isImage: true },
      ]
    }
  }
}
</script>

<style lang="scss">
.problem-container{
  padding-top: 5px;
  .problem-bg{
    background: #fff;
  }
  .message{
    padding: 10px;
    border: 1px solid #f6f6f6;
    border-radius: 5px;
  }
  .submit{
    margin: 16px 10px;
  }
}
</style>
